テキストフィールドの作成とスタイル設定

コンテンツ

テキストフィールドを使用すると、ユーザーはアプリにテキストを入力できます。これらはフォームを構築するために使用されます。メッセージの送信、検索エクスペリエンスの作成など。このレシピでは、テキストフィールドを作成してスタイルを設定する方法を検討します。

Flutter には 2 つのテキストフィールドが用意されています。TextFieldとTextFormField。

`TextField`

TextField最も一般的に使用されるテキスト入力ウィジェットです。

デフォルトでは、TextField下線で装飾されています。ラベル、アイコン、インラインヒントテキスト、エラーテキストを追加するには、InputDecorationとしてdecorationの財産TextField。装飾を完全に除去するには（下線とラベル用に確保されたスペース)、をセットするdecorationヌルにします。

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    hintText: 'Enter a search term',
  ),
),

値が変更されたときに値を取得するには、を参照してくださいテキストフィールドへの変更を処理するレシピ。

`TextFormField`

TextFormFieldを包みますTextFieldそしてそれを統合します同梱物と一緒にForm。これにより追加の機能が提供されます。検証や他の機能との統合などFormFieldウィジェット。

TextFormField(
  decoration: const InputDecoration(
    border: UnderlineInputBorder(),
    labelText: 'Enter your username',
  ),
),

インタラクティブな例

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const appTitle = 'Form Styling Demo';
    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(appTitle),
        ),
        body: const MyCustomForm(),
      ),
    );
  }
}

class MyCustomForm extends StatelessWidget {
  const MyCustomForm({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        const Padding(
          padding: EdgeInsets.symmetric(horizontal: 8, vertical: 16),
          child: TextField(
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              hintText: 'Enter a search term',
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 16),
          child: TextFormField(
            decoration: const InputDecoration(
              border: UnderlineInputBorder(),
              labelText: 'Enter your username',
            ),
          ),
        ),
      ],
    );
  }
}

入力検証の詳細については、「検証を伴うフォームの構築レシピ。